<template>
  <div class="">
    <div class="not__login" v-if="!hasLogin" @click="handleToLogin">
      <span class="link-color">登录 </span>查看收藏列表
    </div>
    <list
      v-else
      :list="agents"
      @search="handleSearch"
      :is-end="isEnd"
      :is-star="true"
      :is-loading.sync="listLoading"
      @more="getAgentList()" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAgentListApi } from '@/api/agent'
import List from './agent.vue'

export default {
  name: 'ListStar',
  components: {
    List
  },
  data () {
    return {
      curPage: 0,
      pageSize: 10,
      isEnd: true,
      listLoading: false,
      search: '',
      agents: []
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'hasLogin'])
  },
  watch: {
    'chatStore.showModels' (val) {
      if (val === 'agent-star') {
        this.getAgentList(1)
      }
    }
  },
  mounted () {
    this.getAgentList(1)
  },
  methods: {
    handleSearch (value) {
      this.search = value
      this.getAgentList(1)
    },
    handleToLogin () {
      this.$gotoLogin()
    },
    async getAgentList (pageIndex) {
      const page = pageIndex || this.curPage + 1
      const params = {
        page,
        page_size: this.pageSize,
        is_star: true,
        keyword: this.search
      }
      if (page === 1) {
        this.listLoading = true
        this.isEnd = false
      }

      const { data } = await getAgentListApi(params)
      const list = data?.data.list || []
      this.isEnd = list.length < this.pageSize
      if (list.length) this.curPage = page
      if (page === 1) {
        this.agents = list
        this.listLoading = false
        return
      }
      this.agents = this.agents.concat(list)
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.not__login {
  font-size: 14px;
  min-height: 202px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: rgba($color: #fff, $alpha: 0.7);
  .link-color:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
</style>
